<template>
  <div class="page-layout">
    <!-- 搜索区域 -->
    <div v-if="$slots.search" class="search-section">
      <slot name="search" />
    </div>

    <!-- 表格区域 -->
    <div class="table-section">
      <!-- 表格头部 -->
      <div v-if="$slots.header" class="table-header">
        <slot name="header" />
      </div>

      <!-- 表格内容区域 -->
      <div class="table-content">
        <div class="table-data-area">
          <slot name="table" />
        </div>
      </div>

      <!-- 分页区域 -->
      <div v-if="$slots.pagination" class="pagination-section">
        <slot name="pagination" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 通用页面布局组件
// 用于统一管理所有页面的布局结构

// 添加组件名称
defineOptions({
  name: 'PageLayout'
})
</script>

<style scoped>
.page-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-color-secondary);
  overflow: hidden;
}

.search-section {
  flex-shrink: 0;
  margin-bottom: 10px;
  background: var(--bg-color-primary);
  border-radius: 8px;
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
}

.table-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-color-primary);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-header {
  flex-shrink: 0;
  /* padding: 16px 20px; */
  border-bottom: 1px solid var(--border-color-primary);
  background: var(--bg-color-primary);
}

.table-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  margin-top: 10px;
}

.table-data-area {
  flex: 1;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* 确保Naive UI表格滚动正常工作 */
.table-data-area :deep(.n-data-table) {
  height: 100%;
}

.table-data-area :deep(.n-data-table-wrapper) {
  height: 100%;
}

.table-data-area :deep(.n-data-table-base-table-header) {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-color-primary);
}

.table-data-area :deep(.n-data-table-th) {
  background: var(--bg-color-primary) !important;
}

/* 确保滚动条样式 */
.table-data-area :deep(.n-data-table-base-table-body)::-webkit-scrollbar {
  width: 6px;
}

.table-data-area :deep(.n-data-table-base-table-body)::-webkit-scrollbar-track {
  background: var(--bg-color-secondary);
  border-radius: 3px;
}

.table-data-area :deep(.n-data-table-base-table-body)::-webkit-scrollbar-thumb {
  background: var(--border-color-primary);
  border-radius: 3px;
}

.table-data-area :deep(.n-data-table-base-table-body)::-webkit-scrollbar-thumb:hover {
  background: var(--primary-color);
}

/* 加载状态样式 */
.table-data-area :deep(.n-data-table-loading) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  z-index: 100;
}

.pagination-section {
  flex-shrink: 0;
  /* padding: 16px 20px; */
  border-top: 1px solid var(--border-color-primary);
  background: var(--bg-color-primary);
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .search-section {
    margin-bottom: 12px;
  }

  .table-header {
    padding: 12px 16px;
  }

  .pagination-section {
    padding: 12px 16px;
    justify-content: center;
  }

  .table-data-area {
    height: 100%;
  }
}

/* 深色主题适配 */
html.dark .search-section,
html.dark .table-section {
  background: var(--bg-color-primary);
}

html.dark .table-data-area :deep(.n-data-table-loading) {
  background: rgba(0, 0, 0, 0.8);
}
</style>